<template>
  <div class="app-unavailable flex items-center justify-center h-full p-8">
    <div class="text-center max-w-md">
      <div class="mb-6">
        <svg class="w-16 h-16 mx-auto text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
        </svg>
      </div>
      
      <h2 class="text-2xl font-bold text-gray-900 mb-4">应用暂时不可用</h2>
      
      <p v-if="isUnknownReason" class="text-gray-600 mb-6">
        抱歉，应用遇到了未知错误。请稍后再试或联系管理员。
      </p>
      
      <p v-else class="text-gray-600 mb-6">
        应用配置有误，请检查配置后重试。
      </p>
      
      <button 
        @click="handleRetry"
        class="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition duration-200"
      >
        重试
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  isUnknownReason?: boolean
}

defineProps<Props>()

const handleRetry = () => {
  window.location.reload()
}
</script>

<style scoped>
.app-unavailable {
  min-height: 400px;
}
</style> 